<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="../style/css/bootstrap.min.css">
  <link rel="stylesheet" href="../style/css/common.css">
</head>

<body>
  <div class="container">
    <ul class="nav nav-tabs mb20">
      <li><a href="index.html">检测人脸</a></li>
      <li class="active"><a href="compareCode.html">相似度比较</a></li>
      <li><a href="centerFace.html">检测最中心人脸</a></li>
      <li><a href="addFeature.html">添加特征码</a></li>
      <li><a href="../jQuery/index.html" target="_blank">切换版本</a></li>
      <li><a href="../index.html">返回首页</a></li>
    </ul>
    <div class="tips">
      <p>提取特征码调用的接口：detectAndGetCodeInfo</p>
      <p>参数解析：imgBlob: 照片的二进制流，0：faceNum的值</p>
      <p>举例：client.detectAndGetCodeInfo(imgBlob, 0, function (data) {})</p>
    </div>
    <ul id="myTab" class="nav nav-pills">
      <li class="active">
        <a href="#home" data-toggle="tab">特征码比对 1:1</a>
      </li>
      <li>
        <a href="#compares" data-toggle="tab">特征码比对 1:N</a>
      </li>
    </ul>
    <div id="myTabContent" class="tab-content tab-div">
      <div class="tab-pane fade in active clearfix" id="home">
        <div class="tips">
          <p>调用的接口：compareCode</p>
          <p>参数解析：codeStr1: 照片1的code特征码，codeStr2：照片2的code特征码；code特征码的字节长度是 512</p>
          <p>client.compareCode(codeStr1, codeStr2,function(data) {})</p>
        </div>
        <div class="div-upload left">
          <button type="button" class="btn btn-default btn-blue">点击上传</button>
          <input type="file" onchange="previewImage(this)" class="btn-file" />
          <div class="preview prevPic"><img src="../style/images/icon1.png" alt="" /></div>
          <div class="picStr" id="code1"></div>
        </div>
        <div class="div-center left">
          <div>
            <button type="button" class="btn btn-default btn-blue compareBtn">点击对比</button>
            <p class="mt20">比对结果：<span class="comPerce">0%</span></p>
          </div>
        </div>
        <div class="div-upload left">
          <button type="button" class="btn btn-default btn-blue">点击上传</button>
          <input type="file" onchange="previewImage(this)" class="btn-file" />
          <div class="preview prevPic"><img src="../style/images/icon1.png" alt="" /></div>
          <div class="picStr" id="code2"></div>
        </div>
      </div>
      <div class="tab-pane fade clearfix" id="compares">
        <div class="tips">
          <p>调用的接口：compareFeatures</p>
          <p>参数解析：codeStr3: 照片1的code特征码，codeArr：照片2的code特征码数组</p>
          <p>举例：client.compareFeatures(codeStr3, codeArr,function (data) {})</p>
          <p class="txtDiv none" style="color: #409eff;">对比完成，鼠标经过人脸框，可查看返回详细信息</p>
        </div>
        <div class="div-upload left">
          <button type="button" class="btn btn-default btn-blue">点击上传</button>
          <input type="file" onchange="previewImage(this)" class="btn-file" />
          <div class="preview prevPic" id="viewImg"><img src="../style/images/icon1.png" alt="" /></div>
          <div class="picStr" id="code3"></div>
        </div>
        <div class="div-center left">
          <button type="button" class="btn btn-default btn-blue compareBtn2">点击对比</button>
        </div>
        <div class="div-upload upload-wid left">
          <button type="button" class="btn btn-default btn-blue">点击上传</button>
          <input type="file" onchange="previewImage(this)" class="btn-file" />
          <div class="preview prevPic" id="viewImgs"><img src="../style/images/icon2.png" alt="" /></div>
          <div class="picStr" id="code4"></div>
        </div>
      </div>
    </div>
    <!-- 提示语 -->
    <div class="box">
      <div class="msg"></div>
    </div>
  </div>
  <script src="../style/js/jquery.min.js"></script>
  <script src="../style/js/bootstrap.min.js"></script>
  <script src="js/thrift.js"></script>
  <script src="js/FaceApi.js"></script>
  <script src="js/FaceApi_types.js"></script>
  <script src="js/common.js"></script>
  <script src="js/preview.js"></script>
  <script>
    // 提取特征码
    imgInfoAll = [];   //获取多人脸中所有人脸信息
    codeArr = [];  // 获取多人脸中所有人脸信息特征码;
    imgNatWid2 = '';
    function getCode(imgBlob, picStrDiv, prevDiv, reader) {
      client.detectAndGetCodeInfo(imgBlob, 0, function (data) {
        var codeId = picStrDiv.getAttribute('id');
        
        // 重置参数值
        $('#' + codeId).text('');

        //判断上传卡位是单人脸卡位
        if (codeId != 'code4') {
          if (data.length > 1) {
            $('.box').show().delay(3000).fadeOut();
            $('.box').find('.msg').text('请上传单人脸照片');
            prevDiv.innerHTML = '<img src="../style/images/icon1.png" alt="" />';
            return false;
          }else{
            $('#' + codeId).text(data[0].code)
          }
        }else{
          // 获取图片的原始值
          $('<img/>').attr('src', $('#viewImgs img').attr('src')).load(function () {
            imgNatWid2 = this.width;
          })


          // 赋值codeArr
          for (var i = 0; i < data.length; i++) {
            codeArr.push(data[i].code);
          }
          if (data.length > 4) {
            $('.upload-wid').css({ 'width': '100%', margin: '20px 0 0 0', })
          } else {
            $('.upload-wid').css({ 'width': '295px', margin: '0 3%', })
          }
          imgInfoAll = data;
        }
      }).fail(function (jqXHR, status, error) {
        $('.box').show().delay(3000).fadeOut();
        $('.box').find('.msg').text(status + ":" + error);
      })
    }


    // 1:1提交对比
    $('.compareBtn').click(function () {
      var codeStr1 = $('#code1').text();
      var codeStr2 = $('#code2').text();

      client.compareCode(codeStr1, codeStr2,function(data) {
        var percen = ((data * 100).toFixed(2) + '%');
        $('.comPerce').text(percen);
      }).fail(function (jqXHR, status, error) {
        $('.box').show().delay(3000).fadeOut();
        $('.box').find('.msg').text(status + ":" + error);
      })
    })


    // 1:N提交对比
    $('.compareBtn2').click(function () {
      var imgViewWid = '';  //定义需要标注的图片在页面展示的宽度
      var imgViewHei = '';  //同上（高度）
      var viewDiv = '';     //定义需要显示标注的多人脸图片盒子
      $('#viewImgs').find('div').remove();   //清空内容

      var $code3 = $('#code3').text();
      var $code4 = $('#code4').text();


      // 赋值
      imgViewWid = $('#viewImgs img').width();
      imgViewHei = $('#viewImgs img').height();


      if ($code3) {
        // 定义并赋值 单人脸图片的code参数
        var codeStr3 = $code3;


        // 赋值
        viewDiv = $('#viewImgs');
      }

      // 当上传的两张照片都是单人脸照片
      if ($code3 && $code4) {
        // 定义并赋值 单人脸图片的code参数
        var codeStr3 = $code3;
        codeArr.push($code4)
        

        // 赋值
        viewDiv = $('#viewImgs');
      }
      

      client.compareFeatures(codeStr3, codeArr,function (data) {
        var newArr = [];  // 定义一个新的数组
        var posArr = [];  // 定义数组，取位置信息
        var numArr = [];  // 定义数组，取相似度百分比

        var prece = imgViewWid / imgNatWid2; // 图片在页面上显示的宽度除以实际宽度

        // 遍历请求返回的结果
        data.forEach(element => {
          var num = (element * 100).toFixed(2) + '%';
          numArr.push({ "pre": num });
        });
        
        
        //循环多人脸图片信息 
        imgInfoAll.forEach(element => {
          var pos = element.pos;
          posArr.push({"pos": element.pos, "angle": element.angle, "ei" : element.ei, "mouth" : element.mouth, nose: element.nose})
        })

        
        // 得到所有内容的新数组
        newArr = posArr.map((item, index) => {
          return { ...item, ...numArr[index] };
        });

        newArr.forEach(value => {
          var pos = value.pos;

          
          //JSON字符串话返回的数据并显示 
          var angle = JSON.stringify(value.angle);
          var posi = JSON.stringify(value.pos);
          var ei = JSON.stringify(value.ei);
          var mouth = JSON.stringify(value.mouth);
          var nose = JSON.stringify(value.nose);
          var tips = '<div class="tips-hover tips"><p>angle:' + angle + '</p><p>ei:' + ei + '</p><p>mouth:' + mouth + '</p><p>nose:' + nose + '</p><p>pos:' + posi + '</p></div> ';

          var html = '<div class="drawDiv" style="left:' + pos.left * prece + 'px;top:' + pos.top * prece + 'px;width:' + pos.width * prece + 'px;height:' + pos.height * prece + 'px;"><p>' + value.pre + '</p>' + tips +'</div>'


          // 加入
          viewDiv.append(html);


          $('.txtDiv').show();
        })
      }).fail(function (jqXHR, status, error) {
        $('.box').show().delay(3000).fadeOut();
        $('.box').find('.msg').text(status + ":" + error);
      })
    })

    // 获取div-center盒子的高度
    var mainHeight = $('.div-upload').outerHeight();
    $('.div-center').css('height', mainHeight);


    $('.preview').on('mouseenter', ".drawDiv", function () {
      $(this).children('div').show();
    }).on('mouseleave', '.drawDiv', function () {
      $(this).children('div').hide()
    })
  </script>
</body>
</html>